<template>
    <el-container>
        <el-aside width="200px">
            <div>
                <img src="../assets/loginBox.svg" />
                <p>欢迎使用动力云客系统</p>
            </div>
        </el-aside>
        <el-main>
            <el-form ref="formValid" :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
                <el-form-item>
                    <h2>欢迎登录</h2>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" />
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.checked" label="记住我" size="large" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit(formValid)">登录</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script setup>
import {ref, onMounted, provide} from "vue"
import { doGet, doPost } from "@/util/axios";
import { notify } from "@/util/notification";
import { useRouter} from "vue-router";
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
let userouter=useRouter()
let form=ref({
    username:"",
    password:"",
    checked:false
})
let rules={
    username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 2, max: 255, message: '账号长度在2-255', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 16, message: '密码长度在3-16', trigger: 'blur' },
  ]
}
let formValid={}
onMounted(()=>{
    let token=window.localStorage.getItem("token")
    if(token!=null){
        doGet("/FreeLogin").then(res=>{
            store.changestatusForTrue()
            userouter.replace("/dashbord")
        })
    }
})
function submit(formValid){
    if (!formValid) return
    formValid.validate((valid, fields) => {
    if (valid) {
        console.log(form.value)
      doPost("/login",form.value,{
            'Content-Type': 'application/x-www-form-urlencoded' 
        }).then(res=>{
        if(res.data.code==200){
            window.localStorage.removeItem("token")
            window.sessionStorage.removeItem("token")
            notify("登录成功","success")
            store.changestatusForTrue()
            if(form.value.checked){
                window.localStorage.setItem("token",res.data.data)
            }else{
                window.sessionStorage.setItem("token",res.data.data)
            }
            userouter.replace("/dashbord")
        }else{
            notify("登录失败","error")
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped>
.el-container{
    height: 100vh;
}
.el-aside{
    background-color: lightskyblue;
    width: 40%;
    text-align: center;
    font-size: 20px;
    color: white;
}
.el-aside div{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.el-aside div img{
    height: 400px;
}
.el-main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60%;
}
.el-form{
    width: 100%;
}
.el-form .el-button{
    width: 80%;
    margin: auto;
}
.el-form .el-checkbox{
    margin: auto;
}
</style>
